<!--  已完成订单页面-->
<template>
    <div>
      <div style="width: 1200px;margin:  0 auto;margin-bottom: 50PX;margin-top: 50PX">
        <el-steps :active="3">
          <el-step title="提交订单" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
          <el-step title="支付订单" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
          <el-step title="办理入住" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
          <el-step title="完成" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
        </el-steps>
      </div>
      <br>
      <div style="width: 1500px;margin:  0 auto; border: 1px solid #dddddd;padding: 10px">
        <div style="background-color: #dddddd;height: 80px;font-size: 18px;color: red;
        line-height: 80px;">
          <i style="margin-left: 50px" class="el-icon-collection-tag"></i>
          <span style="margin-left: 5px" >当前订单状态：已完成 </span>
<!--          <el-button style="margin-left: 1100px" icon="el-icon-arrow-left"
                     size="mini"
                     @click="goBack"
        >返回</el-button>-->

        </div>



        <div style="margin:80PX 0">
          <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">基本信息</i>

          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="订单编号">{{order.orderId}}</el-descriptions-item>
            <el-descriptions-item label="房型">{{order.roomType}}</el-descriptions-item>
            <!--            todo  房间号需要和客房管理页面联合查询-->
            <el-descriptions-item label="房号" :span="2">{{ 房号 }}</el-descriptions-item>
            <el-descriptions-item label="入住时间" >{{ order.checkInDate }}</el-descriptions-item>
            <el-descriptions-item label="离店时间" >{{ order.checkOutDate }}</el-descriptions-item>
            <el-descriptions-item label="订单金额" >{{ order.price }}</el-descriptions-item>
          </el-descriptions>


        </div>



        <div style="margin:80PX 0">
          <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">入住人信息</i>

          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="用户名称">{{ order.name }}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{ order.phoneNum }}</el-descriptions-item>
            <el-descriptions-item label="身份证号" >{{ order.cardNum }}</el-descriptions-item>
          </el-descriptions>
        </div>




        <div style="margin:80PX 0">
          <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">费用信息</i>

          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="订单金额" >{{ order.price }}</el-descriptions-item>
            <!--            todo  留着后期做优惠-->
            <el-descriptions-item label="优惠券">181000</el-descriptions-item>
            <el-descriptions-item label="实际总金额" :span="2">{{ order.amountPaid }}</el-descriptions-item>
          </el-descriptions>
        </div>



        <div style="margin:80PX 0">
          <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">操作信息</i>
          <template>
            <el-table
                :data="tableData4"
                border
                style="width: 100%">
              <el-table-column
                  prop="operator"
                  label="操作者"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="modificationTime"
                  label="修改时间"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="orderStatus"
                  label="订单状态">
              </el-table-column>
            </el-table>
          </template>
        </div>
        <br>

      </div>

    </div>

</template>
<script>
export default {
  data() {
    return {
      tableData1: [
        {
        orderId: '2016-05-02',
        roomTypeName: '王小虎',
        roomNumber: '上海市普陀区金沙江路 1518 弄',
        checkInDate: '上海市普陀区金沙江路 1518 弄',
        checkOutDate: '上海市普陀区金沙江路 1518 弄',
      },
        {
        orderId: '2016-05-04',
        roomTypeName: '王小虎',
        roomNumber: '上海市普陀区金沙江路 1517 弄',
        checkInDate: '上海市普陀区金沙江路 1517 弄',
        checkOutDate: '上海市普陀区金沙江路 1517 弄'
      },
        {
        orderId: '2016-05-01',
        roomTypeName: '王小虎',
        roomNumber: '上海市普陀区金沙江路 1519 弄',
        checkInDate: '上海市普陀区金沙江路 1519 弄',
        checkOutDate: '上海市普陀区金沙江路 1519 弄',
      },
        {
        orderId: '2016-05-03',
        roomTypeName: '王小虎',
        roomNumber: '上海市普陀区金沙江路 1516 弄',
        checkInDate: '上海市普陀区金沙江路 1516 弄',
        checkOutDate: '上海市普陀区金沙江路 1516 弄',
      }],
      tableData2: [
        {
          userName: '2016-05-02',
          userPhone: '王小虎',
          notes: '上海市普陀区金沙江路 1518 弄',
      },
        {
          userName: '2016-05-04',
          userPhone: '王小虎',
          notes: '上海市普陀区金沙江路 1517 弄',
      },
        {
          userName: '2016-05-01',
          userPhone: '王小虎',
          notes: '上海市普陀区金沙江路 1519 弄',
      },
        {
          userName: '2016-05-03',
          userPhone: '王小虎',
          notes: '上海市普陀区金沙江路 1516 弄',
      }],
      tableData3: [
        {
          price: '2016-05-02',
          amountPaid: '王小虎',
          pointDeduction: '上海市普陀区金沙江路 1518 弄',
          alanceDeduction: '上海市普陀区金沙江路 1518 弄'

      },
        {
          price: '2016-05-04',
          amountPaid: '王小虎',
          pointDeduction: '上海市普陀区金沙江路 1517 弄',
          alanceDeduction: '上海市普陀区金沙江路 1517 弄',
      },
        {
          price: '2016-05-01',
          amountPaid: '王小虎',
          pointDeduction: '上海市普陀区金沙江路 1519 弄',
          alanceDeduction: '上海市普陀区金沙江路 1519 弄',
      },
        {
          price: '2016-05-03',
          amountPaid: '王小虎',
        roomNumber: '上海市普陀区金沙江路 1516 弄',
          alanceDeduction: '上海市普陀区金沙江路 1516 弄',
      }],
      tableData4: [
        {
          operator: '2016-05-02',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1518 弄',

      },
        {
          operator: '2016-05-04',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1517 弄',

      },
        {
          operator: '2016-05-01',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1519 弄',

      },
        {
          operator: '2016-05-03',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1516 弄',

      }],
      order: [] // 存储后端返回的数据

    }
  },
  methods: {
    // 订单确认
    confirmOrder(){
      this.$confirm('是否确认该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleUpdate();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消确认'
        });
      });
    },
  },
  mounted() {
    if (this.$route.query.order) {
      this.order = JSON.parse(this.$route.query.order);
    }
  }
}
</script>
